<!-- Mis Rutas -->
 <style type="text/css">
<!--
.file{
	border-color: #CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
	border-style: solid none solid solid;
	border-width: 1px medium 1px 1px;
	padding: 2px 0;
}
.button{
	height: 29px;	
	width: 133px;
	background: url("images/boton_subir.gif") no-repeat;
	font-size: 14px;
	color: #C7D92C;
	text-align: center;
	padding-top: 15px;
}
.button.hover {
	background: url("images/boton_subir.gif") no-repeat;
	color: #95A226;	
}
#button2.hover, #button4.hover {
	text-decoration:underline;
}
-->
</style>
<h2 class="acc_barra" id="misrutas"><a href="#">Mis Rutas</a></h2>
<div style="display: none;" class="acc_contenedor">
 	<div  id="LoaderAjaxRutas" style="z-index:9999;position:absolute;display:none;width: 253px;height:498px;left:4px;opacity:0.8;
							background: url('assets/templates/aplay/imagenes/bg/bg_black_alpha_90.png')	repeat scroll 0 0 transparent;">
		<img alt="Cargando..." src="images/loader.gif" class="fadeAcordeonLoader" />
	</div>
	<!-- MENU PRINCIPAL -->
	<div id="div_misrutasPpal">
		<!-- Inicio Barra Mis Rutas -->
		<div class="minimenu" id="minimenuMisrutasPpal">
		    <div id="barra_mis_rutas" class="barra_acordeon">
		      <ul>
		        <li><a href="javascript:" class="icono tildar" onclick="checkAllOptions('boxZones[]', true);" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Seleccionar todas las rutas');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <li><a href="javascript:" class="icono destildar" onclick="checkAllOptions('boxZones[]', false);" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'No seleccionar ninguna ruta');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <?php  if($LOGIN->PERMISOS[21]){ ?>
		        <li><a href="javascript:" class="icono nueva_ruta" onclick="cMapController.getMapActive().nuevaRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Crear una nueva ruta');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <?php } ?>
		        <li><a href="javascript:" class="icono ver" onclick="cMapController.getMapActive().verRutasSeleccionadas();" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Ver las rutas  seleccionadas');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <li><a href="javascript:" class="icono ocultar" onclick="cMapController.getMapActive().ocultarRutasSeleccionadas();" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Ocultar las rutas seleccionadas');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		         <?php if($LOGIN->PERMISOS[21]){ ?>
		        <li><a href="javascript:" class="icono eliminar_rutas" onclick="cMapController.getMapActive().eliminarRutas();" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Eliminar las rutas seleccionadas');" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <?php  } ?>
		        <li class="ultimo"><a href="javascript:" class="icono z_a" id="orderBTNmisRutas" onclick="ordenarMisRutas();" onmouseover="minimenuInfoSet('minimenuMisrutasPpal', 'Ordenar alfabeticamente',true);" onmouseout="minimenuInfoSet('minimenuMisrutasPpal', '');"></a></li>
		        <li class="ultimo" style="display: none;"><a href="javascript:" class="icono z_a"></a></li>
		      </ul>
		    </div>
	    <div class="infoBar"></div>
		</div>
    <!-- Fin Barra Mis Rutas -->
	    <div class="block">
	     	<!-- CONTENIDO PRINCIPAL -->
			<table border="0" width="100%">
				<tr>
					<td>
						<div id="divListaRutas"></div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	 <div id="div_nuevaRuta" style="display:none" >
            <!-- MENU MODIFICAR/CREAR ZONA -->
            <div class="minimenu" id="minimenuMisrutasNew">
               <div  class="barra_acordeon">
		      	<ul>
            		 <li><a href="javascript:" class="icono volver" onclick="cMapController.getMapActive().cleanEstadoNuevaRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasNew', 'Volver al panel de administracion de rutas');" onmouseout="minimenuInfoSet('minimenuMisrutasNew', '');"></a></li>
                     <li><a href="javascript:" class="icono limpiar" onclick="javascript: if (document.getElementById('rutaIdHID').value=='') cMapController.getMapActive().cleanFormNuevaRuta(); else cMapController.getMapActive().cleanFormModificarRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasNew', 'Limpiar ruta');" onmouseout="minimenuInfoSet('minimenuMisrutasNew', '');"></a></li>
                     <li id="deshacerUltCambio"><a href="javascript:" class="icono deshacerUlt" onclick="cMapController.getMapActive().removeChangeNuevaRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasNew', 'Deshacer ultimo cambio');" onmouseout="minimenuInfoSet('minimenuMisrutasNew', '');"></a></li>
                     <li><a href="javascript:" class="icono centrar" onclick="cMapController.getMapActive().centrarNewRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasNew', 'Centrar el mapa en la ruta creada');" onmouseout="minimenuInfoSet('minimenuMisrutasNew', '');"></a></li>
                     <li><a href="javascript:" class="icono guardar" onclick="cMapController.getMapActive().guardarRuta();" onmouseover="minimenuInfoSet('minimenuMisrutasNew', 'Guardar la ruta creada');" onmouseout="minimenuInfoSet('minimenuMisrutasNew', '');"></a></li>
                </ul>
                </div>
                <div class="infoBar"></div>
            </div>
            <!-- CONTENIDO NUEVA ZONA -->
            <div class="block">
            	<div style="clear:both;">
	                <table border="0" width="100%">
	                  <tr>
	                  	<td colspan="2">
	                       <span class="sectionTITLE" id="newRutaTitle"></span>
	                       <input type="hidden" id="rutaIdHID" name="rutaIdHID" value="" />
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td colspan="2">
	                       <span class="sectionDESC" id="newRutaDesc"></span>
	                       <hr/>
	                       <div id="newRutaErrorDisplay" class="errorDisplay" style="display:none"></div>
	                    </td>
	                  </tr>
	               </table>
               </div>
               <div style="clear:both;">
	               <table>
	                  <tr>
						<td colspan="2">
							<div id="seleccionTipoCreacionRuta">
		            			<div id="creacionRutaManual">Creaci&oacute;n manual <input type="radio" checked="checked" value="1" name="tipoCreacionRuta" id="tipoCreacionRutaManual" onchange="cambiarTipoCreacionRuta(this);" onclick="cambiarTipoCreacionRuta(this);"/></div>
		            			<div id="rutaDireccion">Creaci&oacute;n por direcci&oacute;n <input type="radio"  value="2" name="tipoCreacionRuta" id="tipoCreacionRutaDireccion" onchange="cambiarTipoCreacionRuta(this);" onclick="cambiarTipoCreacionRuta(this);"/></div>
		            			<div id="rutaPorIniFin">Creaci&oacute;n Inicio y Fin <input type="radio"  value="3" name="tipoCreacionRuta" id="tipoCreacionRutaIniFin" onchange="cambiarTipoCreacionRuta(this);" onclick="cambiarTipoCreacionRuta(this);"/></div>
		            			<div id="rutaDesdeArchivo">Creacion desde archivo<input type="radio"  value="4" name="tipoCreacionRuta" id="tipoCreacionRutaArchivo" onchange="cambiarTipoCreacionRuta(this);" onclick="cambiarTipoCreacionRuta(this);"/></div>
		            			<div id="rutaDesdeMovil">Creacion desde movil</div>
		            			<div id="rutaDesdeHistorico">Creacion desde hist&oacute;rico</div>
		            		</div>
		            		<hr/>
						</td>                  
	                  </tr>
	              </table>
	              <div id="RutaDesdeArchivo" style="display:none;">
	              	<ul>
		             	<li>Archivo: 
			             	<div id="subirArchivos">
								<input id="button3" type="file" />
								<ol class="files"></ol>
							</div>
							<div id="generarRuta" style="clear: both;"></div>
		             	</li>
					</ul>
					<script>
						$j(function(){
							$j( "button" ).button();
							var button = $j('#button3');
							new AjaxUpload(button, {
								//action: 'upload.php',
								action: 'upload.php', // I disabled uploads in this example for security reaaons
								name: 'myfile',
								onComplete : function(file,result){
									$j('<li></li>').append($j('#subirArchivos .files')).text(file);
									var ruta = jQuery.parseJSON(result);
									if(ruta.length != undefined){
										cMapController.getMapActive().setRutaTemporal(ruta);
										var button = "<button onclick='cMapController.getMapActive().generarRutaDesdeArchivo();'>Generar ruta</button>";
										$j("#generarRuta").html(button);
									}
								}	
							});	
							/* example 1 * /
							var button = $j('#archivoRuta'), interval;
							new AjaxUpload(button,{
								//action: 'upload-test.php', // I disabled uploads in this example for security reasons
								action: 'upload.php', 
								name: 'myfile',
								onSubmit : function(file, ext){
									// change button text, when user selects file			
									//button.text('Uploading');
									// If you want to allow uploading only 1 file at time,
									// you can disable upload button
									this.disable();
									// Uploding -> Uploading. -> Uploading...
									/*interval = window.setInterval(function(){
										var text = button.text();
										if (text.length < 13){
											button.text(text + '.');					
										} else {
											button.text('Uploading');				
										}
									}, 200);* /
								},
								onComplete: function(file, response){
									//button.text('Upload');
									window.clearInterval(interval);
									// enable upload button
									this.enable();
									// add file to the list
									$j('<li></li>').appendTo($j('#RutaDesdeArchivo .files')).text(file);						
								}
							});*/
						});

					 	/* $j("input[type=file]").filestyle({ 
					    	image: "images/boton_subir.gif",
					     	imageheight : 22,
					     	imagewidth : 82,
					     	width : 60
					 	});*/
					</script>
	             </div>
	              <div id="RutaDesdeHistorico" style="display:none;" class="barra_acordeon">
	              	<ul>
		             	<li>Inicio <input type="radio" checked="checked" value="1" name="iniFin" id="iniRutaDesdeHistorico"  /></li>
		               	<li>Fin <input type="radio" value="2" name="iniFin" id="finRutaDesdeHistorico"  /></li>
						<li><a  onclick="cMapController.getMapActive().cancelarIniFinRutaDesdeHistorico();" href="javascript:;" class="icono cancelar"></a></li>
					</ul>
	             </div>
	              <div id="RutaManual">
		              <table>
		                  <tr>
		                  	<td width="80">
		                       <span class="inputLBL">Distancia:</span>
		                    </td>
		                    <td>
		                       <span class="inputTEXT" id="rutaArea"></span>
		                    </td>
		                  </tr>
		                  <tr>
		                  	<td>
		                       <span class="inputLBL">Nombre:</span>
		                    </td>
		                    <td>
		                       <input type="text" name="nombreRuta" id="nombreRuta" class="gmapInputText" size="30" maxlength="100" value="">
		                       <span class="campoObligatorio">*</span>
		                    </td>
		                  </tr>
		                  <tr>
		                  	<td valign="top">
		                       <span class="inputLBL">Descripcion:</span>
		                    </td>
		                    <td>
		                       <textarea name="descRuta" id="descRuta" cols="25" rows="3" class="gmapInputText"></textarea>
		                    </td>
		                  </tr>
		                   <?php if($LOGIN->isBykom){ ?>
	                      <tr>
		                  	<td valign="top">
		                       	<span class="inputLBL">Tolerancia:</span>
	                        </td>
		                    <td>
		                    	<input class="gmapInputText" type="text" name="toleranciaMisRutas" id="toleranciaMisRuta" maxlength="100" value="<?=RUTAS_TOLERANCIA_DEFAULT?>"/>
		                       	<span class="campoObligatorio">*</span>
	                        </td>
		                  </tr>
	                    <?php }?>
		                  <tr>
		                  	<td valign="top">
		                       <span class="inputLBL">Color:</span>
		                    </td>
		                    <td>
		                       <input type="hidden" name="colorRutaId" id="colorRutaId" value="<?=COLOR_DEFAULT_ZONA_GMAP?>" onChange="cMapController.getMapActive().rutaChangeColor(this.value);">
		         	           <input name="colorRutaText" id="colorRutaText" size="2"  class="colorPicker {valueElement:'colorRutaId', pickerPosition:'right'}">
							</td>
		                  </tr>
	                </table>
	             </div>
	             <div id="RutaPorDireccion" style="display:none;">
	            	<table border="0" >
	                  <tr>
	                  	<td><b>Origen: </b></td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Calle:</span>
	                       <input type="text" name="rutaPuntoCalle" id="rutaPuntoCalle" class="gmapInputText" size="18" maxlength="50" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  	<td>
	                       <span class="inputLBL">Altura:</span><br/>
	                       <input type="text" name="rutaPuntoAltura" id="rutaPuntoAltura" class="gmapInputText" size="6" maxlength="5" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Ciudad:</span>
	                       <input type="text" name="rutaPuntoCiudad" id="rutaPuntoCiudad" class="gmapInputText" size="18" maxlength="50" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  	<td>
	                       <span class="inputLBL">Provincia/Estado:</span>
	                       <input type="text" name="rutaPuntoProvincia" id="rutaPuntoProvincia" class="gmapInputText" size="15" maxlength="50" value="">
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Pais:</span><br/>
	                       <input type="text" name="rutaPuntoPais" id="rutaPuntoPais" class="gmapInputText" size="20" maxlength="50" value="">
	                    </td>
	                  </tr>
	                </table>
	            	<table border="0">
	                  <tr>
	                  	<td><b>Destino: </b></td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Calle:</span>
	                       <input type="text" name="rutaPuntoCalleDest" id="rutaPuntoCalleDest" class="gmapInputText" size="18" maxlength="50" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  	<td>
	                       <span class="inputLBL">Altura:</span><br/>
	                       <input type="text" name="rutaPuntoAlturaDest" id="rutaPuntoAlturaDest" class="gmapInputText" size="6" maxlength="5" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Ciudad:</span>
	                       <input type="text" name="rutaPuntoCiudadDest" id="rutaPuntoCiudadDest" class="gmapInputText" size="18" maxlength="50" value="">
	                       <span class="campoObligatorio">*</span>
	                    </td>
	                  	<td>
	                       <span class="inputLBL">Provincia/Estado:</span>
	                       <input type="text" name="rutaPuntoProvinciaDest" id="rutaPuntoProvinciaDest" class="gmapInputText" size="15" maxlength="50" value="">
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td>
	                       <span class="inputLBL">Pais:</span><br/>
	                       <input type="text" name="rutaPuntoPaisDest" id="rutaPuntoPaisDest" class="gmapInputText" size="20" maxlength="50" value="">
	                    </td>
	                  </tr>
	                  <tr>
	                  	<td colspan="2">
	                       <input type="button" name="buscarRuta" id="buscarRuta" value="Buscar" onclick="crearRutaPorDireccion();">
	                    </td>
	                  </tr>
	                </table>
	             </div>
              </div>
         </div>
   	</div>
</div>